<template>
	<scroll-view class="bg-color">
		<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="'https://'+item.url" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="cu-bar bg-color search">
			<view class="search-form round border-color bg-color">
				<input v-model="searchKey" class="bg-color text-color" type="text" placeholder="请输入案例关键词" confirm-type="search"></input>
				<text @tap="search" class="cuIcon-search text-color"></text>
			</view>
		</view>
		<view class="flex bg-color justify-around padding-tb-sm">
			<view @tap="toBuildSample" class="flex flex-direction text-color">
				<text class="cuIcon-cart home-icon"></text>
				<text class="margin-tb-sm text-center">施工案例</text>
			</view>
			<view @tap="toDsSearch" class="flex flex-direction text-color">
				<text class="cuIcon-profile home-icon"></text>
				<text class="margin-tb-sm text-center">授权门店</text>
			</view>
			<view @tap="toRecordNew" class="flex flex-direction text-color">
				<text class="cuIcon-write home-icon"></text>
				<text class="margin-tb-sm text-center">质保录入</text>
			</view>
			<view @tap="toRecordSearch" class="flex flex-direction text-color">
				<text class="cuIcon-form home-icon"></text>
				<text class="margin-tb-sm text-center">质保查询</text>
			</view>
		</view>
		<view class="cu-list menu">
			<view class="cu-item bg-color">
				<view class="content">
					<text class="cuIcon-goodsfavor text-color"></text>
					<text class="text-color">产品</text>
				</view>
				<view class="action">
					<text class="text-gray text-sm">我们提供什么</text>
				</view>
			</view>
		</view>
		<view class=" category">
			<view class="flex flex-direction justify-around ">
				<image @click="productDes(index)" 
				mode="widthFix" v-for="(cate, index) in categorys" 
				:key="index" :src="'https://'+cate.imageUrl"></image>
			</view>
		</view>
		<view class="cu-list menu">
			<view class="cu-item bg-color">
				<view class="content">
					<text class="cuIcon-upstage text-color"></text>
					<text class="text-color">效果</text>
				</view>
				<view class="action">
					<text class="text-gray text-sm">施工案例</text>
				</view>
			</view>
		</view>
		<view class="grid col-2 sample bg-color">
			<view @click="toBuildSampleDetail(sample.sampleId)" class="cu-item" v-for="(sample,index) in samples" :key="index">
				<view class="flex justify-center sample-item">
					<view class="flex flex-direction justify-center">
						<image mode="widthFix" :src="'https://'+sample.imgUrl"></image>
						<text class="text-center text-color">{{sample.title}}</text>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data: function() {
			return {
				searchKey: "",
				samples: [],
				categorys: [],
				swiperList: []
			}
		},
		created: function(){
			let self = this;
			this.http.get({
				url: "/adv/list",
				param: {
					statu: 1
				}
			}).then(res => {
				self.swiperList = res;
			});
			this.http.get({
				url: "/category/sub",
				param: {
					categoryId: 0
				}
			}).then(res => {
				console.log(res);
				this.categorys = res;
			});
			this.http.get({
				url: "/sample/page",
				param: {
					statu: true,
					current: 1,
					size: 4
				}
			}).then(res => {
				this.samples = res.records;
			});
		},
		methods: {
			productDes: function(index) {
				this.$emit("productTab", index);
			},
			search: function() {
				uni.navigateTo({
					url: "../pages/build/list?key="+this.searchKey
				});
			},
			toRecordNew: function() {
				if (this.store.state.distributor === undefined) {
					uni.navigateTo({
						url: "../pages/distributor/login"
					});
				} else {
					
					uni.navigateTo({
						url: "../pages/record/new"
					});
				}
			},
			toRecordSearch: function() {
				uni.navigateTo({
					url: "../pages/record/search"
				});
			},
			toDsSearch: function() {
				uni.navigateTo({
					url: "../pages/distributor/search"
				});
			},
			toBuildSample: function() {
				uni.navigateTo({
					url: "../pages/build/list"
				});
			},
			toBuildSampleDetail: function(sampleId) {
				uni.navigateTo({
					url: "../pages/build/detail?sampleId="+sampleId
				});
			}
		}
	}
</script>

<style>
	.home-icon {
		font-size: 80rpx;
		text-align: center;
		background-color: #444444;
		height: 120rpx;
		line-height: 120rpx;
		width: 120rpx;
		border-radius: 50rpx;
	}
	
	.cu-list .cu-item {
		border-bottom: 3rpx solid #FFFFFF;
	}
	
	.category {
		
	}

	.category image {
		border-radius: 20rpx;
		width: calc(100% - 20rpx);
		margin: 10rpx;
	}
	
	.sample {
		padding: 10rpx;
	}
	
	.sample .sample-item {
		width: calc(100% - 20rpx);
		margin: 10rpx;
	}
	
	.sample .sample-item view {
		width: 100%;
	}
	
	.sample .sample-item image {
		max-height: 230rpx;
		border-radius: 15rpx;
	}
	.sample .sample-item text {
		margin-top: 10rpx;
	}
</style>
